<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换-jquery</title>
    <link rel="stylesheet" href="../css/test1.css">
    <script src="../js/juqery.js"></script>
</head>
<body>
    <div class="box">
        <ul class="left">
            <li class="change">虞姬</li>
            <li>李白</li>
            <li>貂蝉</li>
            <li>公孙离</li>
            <li>诸葛亮</li>
        </ul>
        <div class="right">
            <div style="display: block;"><img src="../images/虞姬.webp" alt=""></div>
            <div><img src="../images/李白.webp" alt=""></div>
            <div><img src="../images/貂蝉.webp" alt=""></div>
            <div><img src="../images/公孙离.webp" alt=""></div>
            <div><img src="../images/诸葛亮.webp" alt=""></div>
        </div>
    </div>
</body>
<script>
    $(function(){
        $('li').mouseover(function(){
            $(this).addClass('change').siblings().removeClass('change')
            var index = $(this).index()
            $('.right>div').eq(index).show().siblings().hide()
        })
    })
</script>
</html>